<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>luckysheet import excel</title>
    <link rel="stylesheet" href="./plugins/css/pluginsCss.min.css">
    <link rel="stylesheet" href="./plugins/plugins.min.css">
    <link rel="stylesheet" href="./css/main.min.css">
    <script src="./plugins/js/plugin.min.js"></script>
    <script src="./main.min.js"></script>
    <script src="./xlsx.full.min.js"></script>
    <script src="./polyfill.js"></script>
    <script src="./exceljs.js"></script>

    <style>
        #container {
            overflow: auto;
            position: relative;
            height: 100%;
        }

        .btn button,
        input {
            margin-left: 10px;
            margin-top: 8px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="btn">
            
            
            <button class="jsonimport">导入JSON</button>
           
            
        </div>
        <div id="luckysheet"
            style="margin:0px;padding:0px;position:absolute;width:100%;height:88%;left: 0px;top: 50px;"></div>
    </div>
    <script src="luckyexcel.js"></script>
    <script src="./fileSaver.js"></script>
    <script src="./js/readCsv.js"></script>
    <script src="./js/jschartdet.min.js"></script>
    <script src="./js/papaparse.min.js"></script>
    <script src="./js/readJson.js"></script>
    <script>
        document.querySelector('#container').style.height = window.innerHeight + 'px';

        // 渲染一个空白的Luckysheet
        $(function () {
            luckysheet.create({
                container: 'luckysheet'
            })
        })

        // 监听文件上传
        
       
        var jsonimportBtn = document.querySelector('.jsonimport')
       
        jsonimportBtn.addEventListener('click', importJsonData);
        function importJsonData(arr) {
    var data = [
        { "name": "John", "city": "Seattle" },
        { "name": "Mike", "city": "Los Angeles" },
        { "name": "Zach", "city": "New York" }
    ];

    /* 创建worksheet */
    var ws = XLSX.utils.json_to_sheet(data);

    /* 新建空workbook，然后加入worksheet */
    var wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "People");

    /* 生成xlsx文件 */
    // XLSX.writeFile(wb, "sheetjs.xlsx");
    var data = XLSX.utils.sheet_to_html(ws);
    /* 调用数据转换方法将数据格式转换成Luckysheet格式*/
    readFile(data);
    
}
        
        // 获取excel数据
        function importExcel(event) {

            var file = event.target.files[0];
            /* 实例FileReader对象 */
            var reader = new FileReader();
            reader.onload = function (e) {
                /* Parse data */
                var bstr = e.target.result;
                var wb = XLSX.read(bstr, { type: 'binary' });
                /* 获取第一个工作表*/
                var wsname = wb.SheetNames[0];
                var ws = wb.Sheets[wsname];
                /* 将工作表对象转换为JSON对象数组*/
                // var dataArr = XLSX.utils.sheet_to_json(ws, { header: 1 });
                /* 生成HTML输出 */
                var data = XLSX.utils.sheet_to_html(ws);
                /* 调用数据转换方法将数据格式转换成Luckysheet格式*/
                readFile(data);
            };
            /*将文件内容读取为原始二进制字符串*/
            reader.readAsBinaryString(file);
        }

        // 解析excel数据
        function readFile(txtdata) {
            $("#luckysheet-copy-content").html(txtdata);
            var data = new Array($("#luckysheet-copy-content").find("table tr").length);
            var colLen = 0;
            $("#luckysheet-copy-content").find("table tr").eq(0).find("td").each(function () {
                var colspan = parseInt($(this).attr("colspan"));
                if (isNaN(colspan)) {
                    colspan = 1;
                }
                colLen += colspan;
            });

            for (var i = 0; i < data.length; i++) {
                data[i] = new Array(colLen);
            }

            var r = 0;
            var borderInfo = {};
            var luckysheet_select_save = luckysheet.getluckysheet_select_save();

            $("#luckysheet-copy-content").find("table tr").each(function () {
                var $tr = $(this);
                var c = 0;
                $tr.find("td").each(function () {
                    var $td = $(this);
                    var cell = {};
                    var txt = $td.text();

                    if ($.trim(txt).length == 0) {
                        cell.v = null;
                        cell.m = "";
                    }
                    else {
                        var mask = luckysheet.mask.genarate($td.text());
                        cell.v = mask[2];
                        cell.ct = mask[1];
                        cell.m = mask[0];
                    }

                    var bg = $td.css("background-color");
                    if (bg == "rgba(0, 0, 0, 0)") {
                        bg = "rgba(255,255,255)";
                    }

                    cell.bg = bg;

                    var bl = $td.css("font-weight");
                    if (bl == 400 || bl == "normal") {
                        cell.bl = 0;
                    }
                    else {
                        cell.bl = 1;
                    }

                    var it = $td.css("font-style");
                    if (it == "normal") {
                        cell.it = 0;
                    }
                    else {
                        cell.it = 1;
                    }

                    var ff = $td.css("font-family");
                    var ffs = ff.split(",");
                    for (var i = 0; i < ffs.length; i++) {
                        var fa = $.trim(ffs[i].toLowerCase());
                        fa = luckysheet.menuButton.fontjson[fa];
                        if (fa == null) {
                            cell.ff = 0;
                        }
                        else {
                            cell.ff = fa;
                            break;
                        }
                    }

                    var fs = Math.floor(parseInt($td.css("font-size")) * 72 / luckysheet.dpi_y) + 1;
                    cell.fs = fs;

                    var fc = $td.css("color");

                    cell.fc = fc;

                    var ht = $td.css("text-align");
                    if (ht == "center") {
                        cell.ht = 0;
                    }
                    else if (ht == "right") {
                        cell.ht = 2;
                    }
                    else {
                        cell.ht = 1;
                    }

                    var vt = $td.css("vertical-align");
                    if (vt == "middle") {
                        cell.vt = 0;
                    }
                    else if (vt == "top" || vt == "text-top") {
                        cell.vt = 1;
                    }
                    else {
                        cell.vt = 2;
                    }

                    while (c < colLen && data[r][c] != null) {
                        c++;
                    }

                    if (c == colLen) {
                        return true;
                    }

                    if (data[r][c] == null) {
                        data[r][c] = cell;
                        var rowspan = parseInt($td.attr("rowspan"));
                        var colspan = parseInt($td.attr("colspan"));

                        if (isNaN(rowspan)) {
                            rowspan = 1;
                        }

                        if (isNaN(colspan)) {
                            colspan = 1;
                        }


                        var r_ab = luckysheet_select_save[0]["row"][0] + r;
                        var c_ab = luckysheet_select_save[0]["column"][0] + c;
                        for (var rp = 0; rp < rowspan; rp++) {
                            for (var cp = 0; cp < colspan; cp++) {
                                if (rp == 0) {
                                    var bt = $td.css("border-top");
                                    if (bt != null && bt.length > 0 && bt.substr(0, 3).toLowerCase() != "0px") {
                                        var width = $td.css("border-top-width");
                                        var type = $td.css("border-top-style");
                                        var color = $td.css("border-top-color");
                                        var borderconfig = luckysheet.menuButton.getQKBorder(width, type, color);

                                        if (borderInfo[(r + rp) + "_" + (c + cp)] == null) {
                                            borderInfo[(r + rp) + "_" + (c + cp)] = {};
                                        }

                                        borderInfo[(r + rp) + "_" + (c + cp)].t = { "style": borderconfig[0], "color": borderconfig[1] };
                                    }
                                }

                                if (rp == rowspan - 1) {
                                    var bb = $td.css("border-bottom");
                                    if (bb != null && bb.length > 0 && bb.substr(0, 3).toLowerCase() != "0px") {
                                        var width = $td.css("border-bottom-width");
                                        var type = $td.css("border-bottom-style");
                                        var color = $td.css("border-bottom-color");
                                        var borderconfig = luckysheet.menuButton.getQKBorder(width, type, color);

                                        if (borderInfo[(r + rp) + "_" + (c + cp)] == null) {
                                            borderInfo[(r + rp) + "_" + (c + cp)] = {};
                                        }

                                        borderInfo[(r + rp) + "_" + (c + cp)].b = { "style": borderconfig[0], "color": borderconfig[1] };
                                    }
                                }

                                if (cp == 0) {
                                    var bl = $td.css("border-left");
                                    if (bl != null && bl.length > 0 && bl.substr(0, 3).toLowerCase() != "0px") {
                                        var width = $td.css("border-left-width");
                                        var type = $td.css("border-left-style");
                                        var color = $td.css("border-left-color");
                                        var borderconfig = luckysheet.menuButton.getQKBorder(width, type, color);

                                        if (borderInfo[(r + rp) + "_" + (c + cp)] == null) {
                                            borderInfo[(r + rp) + "_" + (c + cp)] = {};
                                        }

                                        borderInfo[(r + rp) + "_" + (c + cp)].l = { "style": borderconfig[0], "color": borderconfig[1] };
                                    }
                                }

                                if (cp == colspan - 1) {
                                    var br = $td.css("border-right");
                                    if (br != null && br.length > 0 && br.substr(0, 3).toLowerCase() != "0px") {
                                        var width = $td.css("border-right-width");
                                        var type = $td.css("border-right-style");
                                        var color = $td.css("border-right-color");
                                        var borderconfig = luckysheet.menuButton.getQKBorder(width, type, color);

                                        if (borderInfo[(r + rp) + "_" + (c + cp)] == null) {
                                            borderInfo[(r + rp) + "_" + (c + cp)] = {};
                                        }

                                        borderInfo[(r + rp) + "_" + (c + cp)].r = { "style": borderconfig[0], "color": borderconfig[1] };
                                    }
                                }

                                if (rp == 0 && cp == 0) {
                                    continue;
                                }
                                data[r + rp][c + cp] = { "mc": { "r": r_ab, "c": c_ab } };
                            }
                        }

                        if (rowspan > 1 || colspan > 1) {
                            var first = { "rs": rowspan, "cs": colspan, "r": r_ab, "c": c_ab };
                            data[r][c].mc = first;
                        }
                    }

                    c++;

                    if (c == colLen) {
                        return true;
                    }
                });

                r++;
            });

            var index = luckysheet.sheetmanage.getSheetIndex(luckysheet.currentSheetIndex);
            var file = luckysheet.getluckysheetfile()[index];
            var luckysheet_selection_range = file["luckysheet_selection_range"];
            luckysheet_selection_range = [];
            luckysheet.selection.pasteHandler(data, borderInfo);
            $("#luckysheet-copy-content").empty();
        }
        //读取csv方法
        
    </script>
</body>

</html>